<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<div id="loadmask-overlay" style="display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index:10000; -moz-opacity: 0.7; opacity:.70; filter: alpha(opacity=70);">
	<div id="loadmask-threebounce" style="display:none; position: absolute; width:300px; height:50px; text-align:center;">
	    <div class="sk-spinner sk-spinner-three-bounce">
	        <div class="sk-bounce1"></div>
	        <div class="sk-bounce2"></div>
	        <div class="sk-bounce3"></div>
	    </div>
	    <div id="loadmask-threebounce-label"></div>
	</div>
	<div id="loadmask-progress" style="display: none; position: absolute; width: 300px; height:50px; text-align: center;">
		<div class="progress progress-striped active">
            <div id="loadmask-progress-bar" style="width: 0%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="0" role="progressbar" class="progress-bar progress-bar-primary">
                <span class="sr-only">40% Complete (success)</span>
            </div>
        </div>
        <div id="loadmask-progress-label"></div>
	</div>
</div>
<script>
var loadmask = new Object();
loadmask.masker = null;
loadmask.overlay = $('#loadmask-overlay');
loadmask.threebounce = $('#loadmask-threebounce');
loadmask.threebouncelabel = $('#loadmask-threebounce-label');
loadmask.progress = $('#loadmask-progress');
loadmask.progressbar = $('#loadmask-progress-bar');
loadmask.progresslabel = $('#loadmask-progress-label');
loadmask.show = function(label) {
	this.progress.hide();
	this.masker = this.threebounce;
	this.layout();
	this.threebouncelabel.text(label);
	this.threebounce.show();
	this.overlay.show();
};
loadmask.hide =  function() {
	this.overlay.hide();
};
loadmask.showProgress = function(label) {
	this.threebounce.hide();
	this.masker = this.progress;
	this.layout();
	this.progressbar.prop('aria-valuenow', 0);
	this.progressbar.css({'width':'0%'});
	this.progresslabel.text(label);
	this.progress.show();
	this.overlay.show();
};
loadmask.updateProgress = function(value) {
	if (value < 0) {
		value = 0;
	}
	if (value > 1) {
		value = 1;
	}
	var percentage = value * 100;
	this.progressbar.prop('aria-valuenow', percentage);
	this.progressbar.css({'width':percentage + '%'});
}
loadmask.layout = function() {
	if (this.masker) {
		var left = (this.overlay.width() - this.masker.width()) / 2;
		var top = (this.overlay.height() - this.masker.height()) / 2;
		this.masker.css({'left':left, 'top':top});
	}
};
$(window).resize(function () {
	loadmask.layout();
});
</script>